<!-- 地址编辑页面 -->
<template>
  <!-- 导航区域 -->
  <van-nav-bar
    title="新增收获地址"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />

  <!-- 表单区域 -->
  <van-form>
    <van-cell-group inset>
      <!-- 1. 收货人姓名 -->
      <van-field
        v-model="realName"
        name="姓名"
        label="姓名"
        placeholder="收货人姓名"
        :rules="[{ required: true, message: '请填写收货人' }]"
      />

      <!-- 2. 收货人电话 -->
      <van-field
        v-model="phone"
        name="电话"
        label="电话"
        placeholder="收货人手机号"
        :rules="[{ required: true, message: '请填写收货人手机号' }]"
      />

      <!-- 3. 收货人地址选择 -->
      <van-field
        v-model="fieldValue"
        is-link
        readonly
        label="地区"
        placeholder="请选择所在地区"
        @click="show = true"
      />
      <!-- 地址选择弹框 -->
      <van-popup v-model:show="show" round position="bottom">
        <van-cascader
          v-model="area"
          title="请选择所在地区"
          :options="options"
          :field-names="fieldNames"
          @close="show = false"
          @finish="onFinish"
        />
      </van-popup>

      <!-- 4. 详细收货地址 -->
      <van-field
        v-model="detail"
        name="详细地址"
        label="详细地址"
        placeholder="详细地址信息"
        :rules="[{ required: true, message: '请填写详细地址信息' }]"
      />
    </van-cell-group>

    <van-cell-group inset>
      <van-field name="switch" label="设为默认地址" input-align="right">
        <template #input>
          <van-switch v-model="isDefault" size="20" />
        </template>
      </van-field>
    </van-cell-group>

    <!-- 底部提交按钮 -->
    <div style="margin: 16px;">
      <van-button
        round
        block
        type="primary"
        native-type="submit"
        @click="initEditCityList"
      >
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
// -------------------------------- 导入模块 ---------------------------------
// 导入 vue3 的 API
import { ref, toRaw, toRefs } from 'vue'
// 导入 vue-router 的 API
import { useRouter } from 'vue-router'

// 导入地址接口
// 1、getCityList：获取省市区列表
// 2、deitAddress：新增、编辑收获地址
import { getCityList, editAddress } from '@/api/address_api'

// 导入 vant 组件，按需引入
import {
  NavBar as VanNavBar,
  Form as VanForm,
  CellGroup as VanCellGroup,
  Field as VanField,
  Popup as VanPopup,
  Cascader as VanCascader,
  Switch as VanSwitch,
  Button as VanButton
} from 'vant'

// 导入自己封装的功能函数
import judgeRequest from '@/utils/judge_request' // 判断请求状态

// -------------------------------- 声明数据 ---------------------------------
// 订单页面传递过来的商品 id
const props = defineProps({
  // 订单中购买的商品的 id
  cartId: {
    type: String,
    default: ''
  }
})
const { cartId } = toRefs(props) // 获取到订单中商品的 id

const router = useRouter() // 初始化路由实例
const realName = ref('') // 收获人名字
const phone = ref('') // 收货人电话
const area = ref('') // 收获人地区
const detail = ref('') // 收货人详细地址
const isDefault = ref(false) // 控制默认地址的开关
const show = ref(false) // 控制地址弹框的显示隐藏
const fieldValue = ref('') // 选择的地址信息，选择后输入框展示的内容
const options = ref([]) // 省市区列表
// 设置级联菜单自定义组件名
const fieldNames = {
  text: 'n', // 省市区名字
  value: 'v', // 城市 id
  children: 'c' // 孩子
}
let address = {} // 用于整合新增或编辑地址时，填写的省市区和城市 ID 的信息

// -------------------------------- 函数封装 ---------------------------------
// 返回上级路由
const onClickLeft = () => router.back()

// 处理省市区数据的函数，去除孩子为空的项
const processData = data => {
  data.forEach(item => {
    // 如果当前元素的 c 为空，说明当前是区级信息，直接将其 c 数据清除
    if (item.c.length === 0) {
      delete item.c
    } else {
      // 说明是省或者市，进行递归遍历
      processData(item.c)
    }
  })

  return data
}

// 获取省市区列表函数
const initCityList = async () => {
  const data = await getCityList() // 发送请求
  const result = judgeRequest(data.status, '获取省市区列表失败！') // 判断请求结果

  // 如果请求成功
  if (result) {
    options.value = processData(data.data) // 获取省区列表
  }
}

// 全部选项选择完毕后，会触发 finish 事件
const onFinish = ({ selectedOptions }) => {
  // 关闭地址弹框
  show.value = false
  // 获取选中的省市区的地址
  fieldValue.value = selectedOptions.map((option) => option.n).join('/')

  // 为提交接口准备数据
  address = {
    province: selectedOptions[0].n, // 省
    city: selectedOptions[1].n, // 市
    city_id: selectedOptions[1].v, // 城市 ID
    district: selectedOptions[2].n // 区县
  }
}

// 发送添加、编辑地址请求
const initEditCityList = async () => {
  // 发送请求
  const data = await editAddress({
    // 设置新增操作，id 为 0；如果是编辑操作，id 为传递的省市区的 id 值
    id: 0,
    real_name: realName.value,
    phone: phone.value,
    is_default: isDefault.value,
    detail: detail.value,
    address
  })
  const result = judgeRequest(data.status, '添加/编辑省市区列表失败！') // 判断请求结果

  // 如果请求成功
  if (result) {
    // 判断跳转到哪个页面
    if (cartId.value) {
      // 如果有商品 id，那么跳回到订单页面
      router.push({
        name: 'order-confirm',
        params: {
          cartId: toRaw(cartId.value)
        }
      })
    } else {
      // 如果没有商品 id，直接跳回上一层即可
      router.back()
    }
  }
}

// -------------------------------- 函数调用 ---------------------------------
initCityList() // 调用获取省市区列表函数
</script>

<style lang="scss" scoped>
// 表单区域
.van-form {
  background-color: #F7F7F7;

  // cell 组区域
  .van-cell-group {
    margin-bottom: 10px;
  }
}
</style>
